<template>
  <div  class="page-layout">
    <h1>DvMarquee</h1>
    <p>提供循环滚动组件用作大屏的滚动列表展示</p>
    <p>dv-marquee 是个循环播放容器</p>
    <pre> 
      dv-marquee props:
      {
        // 滚动数据 (必填)
        data: {
          type: Array,
          default() {
            return []
          }
        },
        disabled: Boolean,
        // 滚动方向 (必填 默认 up)
        direction: {
          type: String,
          default: 'up',
          validator(val) {
            return ['up', 'down', 'left', 'right'].includes(val)
          }
        },
        // 自动开始
        auto: {
          type: Boolean,
          default: true
        },
        // 滚动速度，数值越大速度越快
        speed: {
          type: Number,
          default: 1
        },
        // 间隔滚动停顿等待时间
        waitTime: {
          type: Number,
          default: 3000
        },
        // 间隔滚动，每次滚动的长度，单位px
        scrollLength: Number
      }        
    </pre>
    <h2>基础使用</h2>
    <dv-marquee style="width: 400px; height: 300px; border:1px solid red"
      :data="list" 
      direction="up" 
      ref="marquee" 
    >
      <template v-slot:title>
      <div style="background: red; padding: 5px">标题</div> 
      </template>
      <div v-for="(item, index) in list" :key="item.title" 
      style=" height: 30px; line-height: 30px; ">
        <span class="title">{{item.title}}</span>
        <span class="date" :title="item.date">{{index}}</span>
      </div>
    </dv-marquee>
    <div>
      <button @click="start">start</button> 
      <button @click="stop">stop</button> 
      <button @click="pause">pause</button>
      <button @click="resume">resume</button>
    </div>

    <br/><br/>
    
    <h2>间隔移动</h2>

    <dv-marquee style="width: 400px; height: 100px; border:1px solid red"
    :data="list2" 
    direction="right"
    :wait-time="2000"
    :speed="4"
    :scroll-length="100"
    >
      <template v-slot:title>
       <div style="height: 100%; background: red; padding: 0 5px">标题</div> 
      </template>
      <div v-for="(item, index) in list" :key="item.title" 
      style="display: inline-block;
       margin: 10px; height: 80px; width: 80px; line-height: 80px; border: 1px solid; text-align: center"> 
        <span class="date" :title="item.date">{{index}}</span>
      </div>
    </dv-marquee>
    <br/><br/> 
  </div>

</template>
<script setup lang="ts" >
import {DvMarquee } from '$comp/index';
import {ref} from 'vue' 
 
 
const listInit = () => {
  const list = [] as any
  for(let i=0; i<20; i++){
    list.push({
      title: `无缝滚动第${i}行无缝滚动第${i}行`,
      date: '2017-12-16'
    })
  }
  return list
}
const marquee = ref()
const list = ref(listInit())
const list2 = ref(listInit()) 

const start = () => {
  marquee.value?.start()
}
const stop = () => {
  marquee.value?.stop()
}
function pause() {
  console.log(marquee.value)
  marquee.value?.pause()
}
const resume = () => {
  marquee.value?.resume()
}

 
// import demoWarp from '@/components/demo-warp.vue';
</script>
<style lang="scss" scoped>
 .page-layout{
  height: 100%;
  
 }
</style>